<template>
  <view class="container">
    <view class="title">可做的菜谱</view>
    <view v-if="recipes.length > 0">
      <scroll-view scroll-y class="list-scroll">
        <view v-for="recipe in recipes" :key="recipe.id" class="recipe-item" @click="goToDetail(recipe.id)">
          <text class="emoji">{{ getMainIngredientEmoji(recipe) }}</text>
          <text class="name">{{ recipe.name }}</text>
          <text v-for="ut in recipe.utensils" :key="ut" class="utensil-emoji">{{ getUtensilEmoji(ut) }}</text>
        </view>
      </scroll-view>
    </view>
    <view v-else class="placeholder">暂无可做菜谱</view>
  </view>
</template>

<script>
import { getAllRecipes } from '@/utils/recipe-util.js'
export default {
  data() {
    return {
      recipes: []
    }
  },
  async onLoad(options) {
    let params = {}
    if (options && options.params) {
      try {
        params = JSON.parse(decodeURIComponent(options.params))
      } catch (e) {
        params = {}
      }
    }
    if (params && (params.vegetables || params.meats || params.staples || params.utensils)) {
      const allRecipes = await getAllRecipes()
      this.recipes = allRecipes.filter(recipe => {
        const hasVeg = (params.vegetables || []).some(v => recipe.ingredients.vegetables.includes(v))
        const hasMeat = (params.meats || []).some(m => recipe.ingredients.meats.includes(m))
        const hasStaple = (params.staples || []).some(s => recipe.ingredients.staples.includes(s))
        const utensilAllMatch = (params.utensils || []).every(u => recipe.utensils.includes(u))
        return (hasVeg || hasMeat || hasStaple) && utensilAllMatch
      })
    }
  },
  methods: {
    goToDetail(id) {
      uni.navigateTo({ url: '/pages/recipe-detail/recipe-detail?id=' + id })
    },
    getMainIngredientEmoji(recipe) {
      const v = recipe.ingredients.vegetables
      const m = recipe.ingredients.meats
      const s = recipe.ingredients.staples
      if (v && v.length > 0) return this.getIngredientEmoji(v[0])
      if (m && m.length > 0) return this.getIngredientEmoji(m[0])
      if (s && s.length > 0) return this.getIngredientEmoji(s[0])
      return '🍽️'
    },
    getIngredientEmoji(name) {
      switch (name) {
        case '土豆': return '🥔'
        case '胡萝卜': return '🥕'
        case '花菜': return '🥦'
        case '白萝卜': return '🥗'
        case '西葫芦': return '🥒'
        case '茄子': return '🍆'
        case '芹菜': return '🥬'
        case '黄瓜': return '🥒'
        case '洋葱': return '🧅'
        case '菌菇': return '🍄'
        case '豆腐': return '🧊'
        case '包菜': return '🥬'
        case '白菜': return '🥬'
        case '牛肉': return '🥩'
        case '香肠': return '🌭'
        case '腊肠': return '🥓'
        case '鸡肉': return '🍗'
        case '猪肉': return '🥩'
        case '鸡蛋': return '🥚'
        case '虾': return '🦐'
        case '骨头': return '🦴'
        case '鱼': return '🐟'
        case '面条': return '🍜'
        case '面包': return '🍞'
        case '米': return '🍚'
        case '方便面': return '🍜'
        default: return '🍽️'
      }
    },
    getUtensilEmoji(name) {
      switch (name) {
        case '烤箱': return '🧑‍🍳'
        case '空气炸锅': return '🔥'
        case '微波炉': return '📱'
        case '电饭煲': return '🍚'
        case '一口能炒又能煮的大锅': return '🥘'
        default: return '🍽️'
      }
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #fff;
  padding: 20rpx;
}
.title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin: 20rpx 0;
}
.placeholder {
  color: #999;
  font-size: 18px;
  text-align: center;
  margin-top: 40rpx;
}
.list-scroll {
  flex: 1;
  min-height: 0;
  margin-bottom: 0;
  padding-bottom: 30rpx;
  /* 让内容更靠近底部 */
  max-height: calc(100vh - 120rpx);
}
.recipe-item {
  background: #e3f2fd;
  border-radius: 14rpx;
  border: 1rpx solid #90caf9;
  padding: 24rpx;
  margin-bottom: 14rpx;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.emoji {
  font-size: 20px;
  margin-right: 8rpx;
}
.name {
  font-size: 17px;
  color: #1976d2;
  font-weight: bold;
  margin-right: 8rpx;
}
.utensil-emoji {
  font-size: 16px;
  margin-left: 4rpx;
}
</style> 